<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp"%>

<!DOCTYPE html>
<html>
<!-- Head -->
<head>
    <meta charset="utf-8"/>
    <title>部门管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <%@ include file="/WEB-INF/jsp/commons/header.jsp"%>
    <link href="${__rootStatic__}/home/sysconf/department.css" rel="stylesheet"/>
</head>

<body>

<div class="main-container container-fluid">
    <div class="page-container">
    
        <!-- S= 左侧菜单栏 -->
        <%@ include file="/WEB-INF/jsp/commons/menu.jsp"%>
        <!-- E= 左侧菜单栏 -->
        
        <!-- S= 右侧内容 -->
        <div class="page-content">
        
            <!-- S= 右侧顶部导航 右侧头部按钮 -->
            <%@ include file="/WEB-INF/jsp/commons/top_nav.jsp"%>	
            <!-- S= 右侧顶部导航 -->

            <!-- S= 右侧页面主体 -->
            <div class="page-body animated fadeInRight">
                <h5 class="row-title">
                    <img src="${__rootStatic__}/dep/assets/img/department-icon.png" alt="">
                    <span>部门</span>
                    <i class="fa fa-plus-square-o pull-right addDepartment-btn"></i>
                </h5>
                <div class="row">
                    <div class="col-xs-6 col-sm-3">
                        <div class="department">
                            <ul class="nav sidebar-menu">
                                <!--集团-->
                                <li class="group">
                                    <a href="#" class="menu-dropdown">
                                        <img src="${__rootStatic__}/dep/assets/img/group-icon.png" alt="">
                                        <span class="menu-text">集团</span>
                                        <i class="fa fa-plus-square-o addGroup../department"></i>
                                        <i class="fa fa-angle-down pull-right"></i>
                                    </a>
                                    <ul class="submenu">
                                        <li class="active">
                                            <a href="javascript:;">
                                                <i class="fa fa-user"></i>
                                                <span class="menu-text">总裁办(7人)</span>
                                                <i class="fa fa-plus-square-o pull-right"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:;">
                                                <i class="fa fa-user"></i>
                                                <span class="menu-text">财务中心(9人)</span>
                                                <i class="fa fa-plus-square-o pull-right"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="menu-dropdown">
                                                <i class="fa fa-user"></i>
                                                <span class="menu-text">销售中心(100人)</span>
                                                <i class="fa fa-angle-right pull-right"></i>
                                            </a>
                                            <ul class="submenu">
                                                <li>
                                                    <a href="javascript:;">
                                                        <span class="menu-text">销售中心</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <span class="menu-text">销售中心</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <span class="menu-text">销售中心</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#" class="menu-dropdown">
                                                <i class="fa fa-user"></i>
                                                <span class="menu-text">综合管理中心(43人)</span>
                                                <i class="fa fa-angle-right pull-right"></i>
                                            </a>
                                            <ul class="submenu">
                                                <li>
                                                    <a href="javascript:;">
                                                        <span class="menu-text">综合管理中心</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <span class="menu-text">综合管理中心</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <span class="menu-text">综合管理中心</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="menu-dropdown">
                                                <i class="fa fa-user"></i>
                                                <span class="menu-text">市场营销中心(19人)</span>
                                                <i class="fa fa-angle-right pull-right"></i>
                                            </a>
                                            <ul class="submenu">
                                                <li>
                                                    <a href="javascript:;">
                                                        <span class="menu-text">市场营销中心</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <span class="menu-text">市场营销中心</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;">
                                                        <span class="menu-text">市场营销中心</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="javascript:;">
                                                <i class="fa fa-user"></i>
                                                <span class="menu-text">质检中心(8人)</span>
                                                <i class="fa fa-plus-square-o pull-right"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <!--分校-->
                                <li class="branchSchool">
                                    <a href="#" class="menu-dropdown">
                                        <img src="${__rootStatic__}/dep/assets/img/branchSchool-icon.png" alt="">
                                        <span class="menu-text">分校</span>
                                        <i class="fa fa-plus-square-o addBranchSchool../department"></i>
                                        <i class="fa fa-angle-down pull-right"></i>
                                    </a>
                                    <ul class="submenu">
                                        <li>
                                            <a href="javascript:;">
                                                <span class="menu-text">北京分校</span>
                                                <i class="fa fa-plus-square-o pull-right"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:;">
                                                <span class="menu-text">上海分校</span>
                                                <i class="fa fa-plus-square-o pull-right"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="hidden-xs col-sm-3">
                        <div class="position-name">
                            <ul class="nav sidebar-menu">
                                <li>
                                    <a href="#" class="menu-dropdown">
                                        <span class="menu-text">职位名称</span>
                                        <button type="button" class="pull-right btn btn-default btn-sm addPosition-btn">
                                            新增职位
                                        </button>
                                    </a>
                                    <ul class="submenu">
                                        <li class="active">
                                            <a href="javascript:;">
                                                <span class="menu-text">总裁(1人)</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:;">
                                                <span class="menu-text">副总裁(3人)</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:;">
                                                <span class="menu-text">总裁秘书(1人)</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:;">
                                                <span class="menu-text">工会主席(1人)</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:;">
                                                <span class="menu-text">区域负责人(1人)</span>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-6">
                        <!--S= 部门信息展示-->
                        <div class="widget department-info department-information">
                            <div class="widget-header">
                                <i class="widget-icon fa fa-gear"></i>
                                <span class="widget-caption">部门信息</span>
                                <div class="widget-buttons">
                                    <a href="#" data-toggle="config">
                                        <i class="fa fa-cog"></i>
                                    </a>
                                    <a href="#" data-toggle="maximize">
                                        <i class="fa fa-expand"></i>
                                    </a>
                                    <a href="#" data-toggle="collapse">
                                        <i class="fa fa-minus"></i>
                                    </a>
                                    <a href="#" data-toggle="dispose">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div><!--Widget Buttons-->
                            </div><!--Widget Header-->
                            <div class="widget-body">
                                <table class="table">
                                    <tbody>
                                    <tr>
                                        <td class="col-xs-3">编号:</td>
                                        <td>0000</td>
                                    </tr>
                                    <tr>
                                        <td class="col-xs-3">简称:</td>
                                        <td>总裁办</td>
                                    </tr>
                                    <tr>
                                        <td class="col-xs-3">上级部门:</td>
                                        <td>无</td>
                                    </tr>
                                    <tr>
                                        <td class="col-xs-3">状态:</td>
                                        <td>有效</td>
                                    </tr>

                                    <tr>
                                        <td class="col-xs-3 describe">描述:</td>
                                        <td>
                                            <textarea class="form-control" rows="6" readonly>暂无</textarea>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div><!--Widget Body-->
                        </div>
                        <!--E= 部门信息展示-->
                        <!--S= 添加部门信息-->
                        <div class="widget department-info addDepartment hidden">
                            <div class="widget-header">
                                <i class="widget-icon fa fa-gear"></i>
                                <span class="widget-caption">部门信息</span>
                                <div class="widget-buttons">
                                    <a href="#" data-toggle="dispose">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div><!--Widget Buttons-->
                            </div><!--Widget Header-->
                            <div class="widget-body">
                                <form role="form" class="form-horizontal" id="form1" method="post" onsubmit="return departmentForm();">
                                    <div class="form-group col-sm-12 col-xs-12">
                                        <label for="code" class="col-sm-3 control-label">编号</label>
                                        <div class="col-sm-9">
                                            <input type="text" name="code" class="form-control"
                                                   id="code" placeholder="请输入编号">
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-12 col-xs-12">
                                        <label for="shortName" class="col-xs-3 control-label">简称</label>
                                        <div class="col-xs-9">
                                            <input type="text" name="shortName" class="form-control"
                                                   id="shortName" placeholder="请输入部门简称(例:总裁办)">
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-12 col-xs-12">
                                        <label for="parentId" class="col-xs-3 control-label">上级部门</label>
                                        <div class="col-xs-9">
                                            <select name="parentId" id="parentId" class="form-control">
                                                <option value="0">无</option>
                                                <option value="1">总裁办</option>
                                                <option value="2">财务中心</option>
                                                <option value="3">销售中心</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-12 col-xs-12">
                                        <label class="col-xs-3 control-label">状态</label>
                                        <div class="col-xs-9">
                                            <div class="radio">
                                                <label>
                                                    <input name="enable" type="radio" checked="checked" value="1">
                                                    <span class="text">有效</span>
                                                </label>
                                            </div>
                                            <div class="radio">
                                                <label>
                                                    <input name="enable" type="radio" value="0">
                                                    <span class="text">无效</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-xs-12 col-md-12">
                                        <label for="description" class="control-label col-xs-3">描述</label>
                                        <div class="col-xs-9 col-ms-10">
                                            <textarea class="form-control" id="description" name="description" rows="6"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group col-xs-12">
                                        <div class="col-xs-3 col-xs-offset-3">
                                            <button type="reset"
                                                    class="btn btn-danger btn-lg form-control cancel-btn">取消
                                            </button>
                                        </div>
                                        <div class="col-xs-3 col-xs-offset-1">
                                            <button type="submit"
                                                    class="btn btn-primary btn-lg form-control confirm-btn">确认
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div><!--Widget Body-->
                        </div>
                        <!--E= 添加部门信息-->
                        <!--S= 职位信息展示-->
                        <div class="widget department-info position-information hidden">
                            <div class="widget-header">
                                <i class="widget-icon fa fa-gear"></i>
                                <span class="widget-caption">职位信息</span>
                                <div class="widget-buttons">
                                    <a href="#" data-toggle="config">
                                        <i class="fa fa-cog"></i>
                                    </a>
                                    <a href="#" data-toggle="maximize">
                                        <i class="fa fa-expand"></i>
                                    </a>
                                    <a href="#" data-toggle="collapse">
                                        <i class="fa fa-minus"></i>
                                    </a>
                                    <a href="#" data-toggle="dispose">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div><!--Widget Buttons-->
                            </div><!--Widget Header-->
                            <div class="widget-body">
                                <table class="table">
                                    <tbody>
                                    <tr>
                                        <td class="col-xs-3">简称:</td>
                                        <td>总裁</td>
                                    </tr>
                                    <tr>
                                        <td class="col-xs-3">编号:</td>
                                        <td>00001</td>
                                    </tr>
                                    <tr>
                                        <td class="col-xs-3">职位名称:</td>
                                        <td>总裁</td>
                                    </tr>
                                    <tr>
                                        <td class="col-xs-3">状态:</td>
                                        <td>有效</td>
                                    </tr>

                                    <tr>
                                        <td class="col-xs-3 describe">描述:</td>
                                        <td>
                                            <textarea class="form-control" rows="6" readonly>制定公司的月度、季度和年度计划和指标;监控各个部门运营发展状况，对公的人力资源状况，财务收入和支出状况，公司资产整体状况进行监控管理。</textarea>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div><!--Widget Body-->
                        </div>
                        <!--E= 职位信息展示-->
                    </div>
                </div>
                <h5 class="row-title">
                    <i class="fa fa-align-justify"></i>
                    <span>部门职位列表</span>
                </h5>
                <div class="widget position-list">
                    <div class="widget-header clearfix">
                        <div class="pull-left search-position">
                            <label>
                                <input type="search" class="input-sm" placeholder="职位名称/所属部门">
                                <span class="fa fa-search"></span>
                            </label>
                        </div>
                        <div class="widget-buttons">
                            <a href="#" data-toggle="config">
                                <i class="fa fa-cog"></i>
                            </a>
                            <a href="#" data-toggle="maximize">
                                <i class="fa fa-expand"></i>
                            </a>
                            <a href="#" data-toggle="collapse">
                                <i class="fa fa-minus"></i>
                            </a>
                            <a href="#" data-toggle="dispose">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="widget-body">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th></th>
                                <th>职位名称</th>
                                <th>职位编码</th>
                                <th>上级职位</th>
                                <th>所属部门</th>
                                <th>角色</th>
                                <th>操作</th>
                            </tr>
                            </thead>

                            <tbody>
                            <tr>
                                <td></td>
                                <td><i class="fa fa-user"></i><span>总裁</span></td>
                                <td>000001</td>
                                <td>总裁办</td>
                                <td>总裁办</td>
                                <td>超级管理员</td>
                                <td>
                                    <a href="#" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i>编辑</a>
                                    <a href="#" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i>删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td><i class="fa fa-user"></i><span>副总裁</span></td>
                                <td>000002</td>
                                <td>总裁</td>
                                <td>总裁办</td>
                                <td>超级管理员</td>
                                <td>
                                    <a href="#" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i>编辑</a>
                                    <a href="#" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i>删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <i class="fa fa-user"></i>
                                    <span>总经理</span>
                                </td>
                                <td>000003</td>
                                <td>副总裁</td>
                                <td>总裁办</td>
                                <td>超级管理员</td>
                                <td>
                                    <a href="#" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i>编辑</a>
                                    <a href="#" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i>删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <i class="fa fa-user"></i>
                                    <span>总监</span>
                                </td>
                                <td>000004</td>
                                <td>总经理</td>
                                <td>总裁办</td>
                                <td>超级管理员</td>
                                <td>
                                    <a href="#" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i>编辑</a>
                                    <a href="#" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i>删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <i class="fa fa-user"></i>
                                    <span>总裁秘书</span>
                                </td>
                                <td>000005</td>
                                <td>总监</td>
                                <td>总裁办</td>
                                <td>超级管理员</td>
                                <td>
                                    <a href="#" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i>编辑</a>
                                    <a href="#" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i>删除</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="row widget-footer">
                            <div class="col-xs-6">
                                <ul class="pagination">
                                    <li class="prev disabled">
                                        <a href="#"><i class="fa fa-angle-double-left"></i></a>
                                    </li>
                                    <li class="active"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">...</a></li>
                                    <li class="next">
                                        <a href="#"><i class="fa fa-angle-double-right"></i></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-xs-6">
                                <div class="form-group text-align-right">
                                    <label>转到
                                        <select class="form-inline">
                                            <option class="1">1</option>
                                            <option class="2">2</option>
                                            <option class="3">3</option>
                                            <option class="4">4</option>
                                            <option class="5">5</option>
                                        </select>
                                        页 <span class="line">|</span>
                                    </label>
                                    <label>
                                        每页显示
                                        <select class="form-inline">
                                            <option value="5">5</option>
                                            <option value="10">10</option>
                                            <option value="15">15</option>
                                            <option value="20">20</option>
                                        </select>
                                        条 <span class="line">|</span>
                                    </label>
                                    <label>共计<span>48</span>条</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- E= 右侧页面主体 -->
        </div>
        <!-- E= 右侧内容 -->
    </div>
</div>

<%@ include file="/WEB-INF/jsp/commons/footer.jsp"%>
<script src="${__rootStatic__}/home/sysconf/department.js"></script>

</body>
</html>
